<template>
	<div id="academic-admin" v-loading="loading">
		<tool-bar :bar_title="bar_title" @searchList="searchList" @addAdmin="addAdmin" @updatePower="updatePower"></tool-bar>
		<a-table :columns="columns" :dataSource="data" :pagination="pagination" @change="onTableChange"  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect: onSelect,onSelectAll: onSelectAll }">
			<div slot="operation" class="opt">
				<div class="reset-pwd">
					<img src="@/assets/icons/sys-manager/icon-reset-password.png" alt=""> 重置密码
				</div>
				<div class="delete">
					<img src="@/assets/icons/sys-manager/icon-delete.png" alt=""> 删除
				</div>
			</div>
		</a-table>

		<!-- 新增教务管理员弹框 -->
		<a-modal v-model="addAdminVisible" :maskClosable="false" centered>
			<template #title>
				<div class="title">添加管理员</div>
			</template>
			<div class="admin-form">
				<a-form-model :model="addForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="addFormRules" ref="addFormRef">
					<a-form-model-item label="用户名" prop="userName">
						<a-input v-model="addForm.userName" placeholder="请输入用户名" size="large" />
					</a-form-model-item>
					<a-form-model-item label="姓名" prop="displayName">
						<a-input v-model="addForm.displayName" placeholder="请输入姓名" size="large" />
					</a-form-model-item>
					<a-form-model-item label="工号" prop="userNo">
						<a-input v-model="addForm.userNo" placeholder="请输入工号" size="large" />
					</a-form-model-item>
					<a-form-model-item label="学校" prop="schoolId">
						<a-select v-model="addForm.schoolId" show-search placeholder="请选择学校" size="large" option-filter-prop="children" :filter-option="filterOption" @focus="handleFocus" @search="searchSchool" @popupScroll="handleScroll">
							<a-select-option :value="school.schoolId" v-for="school in schoolList" :key="school.schoolId">
								{{school.schoolName}}
							</a-select-option>

						</a-select>
					</a-form-model-item>
				</a-form-model>
			</div>

			<template #footer>
				<div class="footer">
					<div class="save" @click="saveInfo">
						保存
					</div>
					<div class="cancel" @click="cancelSave">
						取消
					</div>
				</div>
			</template>
		</a-modal>
	</div>
</template>

<script>
import toolBar from '../components/tool-bar.vue';
export default {
	components: {
		toolBar,
	},
	data() {
		return {
			bar_title: '教务管理员',
			data: [],
			columns: [
				{
					title: '序号',
					dataIndex: 'Number',
					key: 'Number',
				},
				{
					title: '学校',
					dataIndex: 'SchoolName',
					key: 'SchoolName',
					sorter: true,
				},
				{
					title: '姓名',
					dataIndex: 'DisplayName',
					key: 'DisplayName',
					sorter: true,
				},
				{
					title: '用户名',
					dataIndex: 'UserName',
					key: 'UserName',
					sorter: true,
				},
				{
					title: '工号',
					dataIndex: 'UserNo',
					key: 'UserNo',
					sorter: true,
				},
				{
					title: '创建时间',
					dataIndex: 'DateCreated',
					key: 'DateCreated',
					sorter: true,
				},
				{
					title: '操作',
					dataIndex: 'operation',
					key: 'operation',
					scopedSlots: { customRender: 'operation' },
				},
			],
			pagination: {
				pageSizeOptions: ['10', '20', '50', '100', '1000'],
				showSizeChanger: true,
				showTotal(total) {
					return `共 ${total} 条`;
				},
				onChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
				},

				buildOptionText(props) {
					return props.value + '条/页';
				},
				current: 1,
				pageSize: 10,
				total: 0,
			},
			loading: false,
			selectedRowKeys: [],
			selectionRowsPlus: [],
			sort: '',
			key: '',
			schoolName: '',
			addAdminVisible: false,
			addForm: {
				userName: '',
				displayName: '',
				userNo: '',
				schoolId: '',
			},
			labelCol: { span: 6 },
			wrapperCol: { span: 14 },
			addFormRules: {
				userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				displayName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				schoolId: [{ required: true, message: '请选择学校', trigger: 'change' }],
			},
			schoolList: [],
		};
	},
	created() {
		this.getList();
	},
	methods: {
		updatePower() {
			if (this.selectedRowKeys.length) {
				console.log(this.selectedRowKeys);
			} else {
				console.log('未选择');
			}
		},
		filterOption(input, option) {
			console.log(option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		handleScroll() {
			// console.log('23');
		},
		searchSchool(val) {
			console.log(val);
			this.schoolName = val;
			this.getSchoolList();
		},
		handleFocus() {
			this.getSchoolList();
		},
		// 获取学校列表
		getSchoolList() {
			this.$http.post('/api/manager/school/getEsSchoolList', { schoolName: this.schoolName }).then((rst) => {
				this.loading = false;
				if (rst.code > 0) {
					// this.$message.success(rst.msg);
					this.schoolList = rst.result;
				} else {
					this.$message.error(rst.msg);
				}
			});
		},
		cancelSave() {
			this.addAdminVisible = false;
			this.$refs.addFormRef.resetFields();
		},
		saveInfo() {
			console.log(this.addForm);
			this.$refs.addFormRef.validate((valid) => {
				if (valid) {
					this.loading = true;
					this.$http.post('/api/manager/ImportManager/saveManagerUser', this.addForm).then((rst) => {
						this.loading = false;
						if (rst.code > 0) {
							this.$message.success(rst.msg);
						} else {
							this.$message.error(rst.msg);
						}
					});
				} else {
					return false;
				}
			});
		},
		// 新增管理员
		addAdmin() {
			this.addAdminVisible = true;
		},
		getList() {
			this.loading = true;
			this.$http
				.post('/api/manager/importManager/getList', {
					page: this.pagination.current || 1,
					pageSize: this.pagination.pageSize || 10,
					sort: this.sort,
					key: this.key,
					schoolName: this.schoolName,
				})
				.then((rst) => {
					this.loading = false;
					if (rst.code > 0) {
						this.data = [];
						this.pagination.current = rst.pagination.pageIndex;
						this.pagination.pageSize = rst.pagination.pageSize;
						this.pagination.total = rst.pagination.totalCount;
						if (rst.list.length) {
							console.log(rst);
							rst.list.forEach((item, index) => {
								let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
								this.data.push({
									...item,
									Number: number,
								});
							});
						}
					} else {
						this.$message.error(rst.msg);
					}
				});
		},
		searchList(formData) {
			console.log(formData);
			this.schoolName = formData.schoolName;
			this.key = formData.userName;
			this.getList();
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			// this.$nextTick(() => {
			// 	this.selectedRowKeys = selectedRowKeys;
			// });
			setTimeout(() => {
				console.log(this.selectionRowsPlus); //打印的结果就是我们选中的内容
				this.$nextTick(() => {
					this.selectedRowKeys = selectedRowKeys;
				});
			});
		},
		onTableChange(pagination, filters, sorter, { currentDataSource }) {
			this.sort = sorter.order ? (sorter.order === 'ascend' ? sorter.field : '-' + sorter.field) : '';
			this.getList();
		},
		onSelect(record, selected) {
			selected
				? this.selectionRowsPlus.push(record)
				: this.selectionRowsPlus.splice(
						this.selectionRowsPlus.findIndex((x) => x.Id === record.Id),
						1
				  );
		},
		onSelectAll(selected, selectedRows, changeRows) {
			this.selectionRowsPlus = selected
				? this.selectionRowsPlus.concat(changeRows)
				: this.selectionRowsPlus.filter((x) => !changeRows.find((i) => i.Id === x.Id));
		},
	},
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>